function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}
function animate(element, json, fn) {
    clearInterval(element.timerId)
    element.timerId = setInterval(function () {
        let flag = true
        for (const attr in json) {
            if (attr == "zIndex") {
                element.style[attr] = json[attr]
            } else if (attr == "backgroundColor") {
                element.style[attr] = json[attr]
            } else if (attr == "opacity") {
                let current = getStyle(element, attr) * 100
                let target = json[attr] * 100
                let step = (target - current) / 50
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                current += step
                element.style[attr] = current / 100
                if (current != target) {
                    flag = false
                }
                // console.log("current:" + current + "---step:" + step + "---target:" + target)
            } else if (attr == "display") {
                element.style[attr] = json[attr]
            } else {
                let current = parseInt(getStyle(element, attr))
                let target = json[attr]
                let step = (target - current) / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                current += step
                element.style[attr] = current + "px"
                if (current != target) {
                    flag = false
                }
                // console.log("current:" + current + "---step:" + step + "---target:" + target)
            }
        }
        if (flag) {
            clearInterval(element.timerId)
            if (fn) {
                fn()
            }
        }
    }, 20)
}
// 显示与隐藏
let link = document.getElementById("link")
let model = document.getElementById("model")
let modelb = document.getElementById("model-btn")

link.addEventListener("click", function (e) {
    model.style.display = "block";
    let l = window.innerWidth / 2 - model.clientWidth / 2;
    let t = window.innerHeight / 2 - model.offsetHeight / 2;
    model.style.left = l + "px";
    model.style.top = t + "px";
}, false)
modelb.addEventListener("click", function () {
    model.style.display = "none";
}, false)

// 标签页
let tablis = document.getElementsByClassName("nav-tabs")[0].children
let tabpanels = document.getElementsByClassName("tab-panel")

for (let i = 0; i < tablis.length; i++) {
    const li = tablis[i];
    li.index = i;
    li.addEventListener("click", function () {
        for (let j = 0; j < tablis.length; j++) {
            const l = tablis[j];
            l.removeAttribute("class");
        }
        this.setAttribute("class", "active");
        for (let k = 0; k < tabpanels.length; k++) {
            const p = tabpanels[k];
            p.className = "tab-panel"
        }
        tabpanels[this.index].className = "tab-panel active";
    })
}

// 手风琴
let controls = document.getElementsByClassName("accordion-control")
let panels = document.getElementsByClassName("accordion-panel")

for (let i = 0; i < controls.length; i++) {
    const c = controls[i];
    c.index = i
    c.addEventListener("click", function () {
        let p = panels[this.index]
        let height = p.children[0].clientHeight
        if (parseInt(getStyle(p, "height")) == 0) {
            animate(p, { "height": height })
        } else {
            animate(p, { "height": 0 })
        }
    }, false)
}

// 图片查看器
let viewer = document.getElementById("photo-viewer")
let thumbs = document.getElementsByClassName("thumb")
let cache = {}
let currentObj, request

function simulateClick(el) {
    var evt;
    if (document.createEvent) { // DOM Level 2 standard 
        evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        el.dispatchEvent(evt);
    } else if (el.fireEvent) { // IE 
        el.fireEvent('onclick');
    }
}

function corssfade(element) {
    // if (currentObj) {
    //     element.style.display = "block"
    //     animate(currentObj, { "opacity": 0.1 }, function () {
    //         currentObj.style.display = "none"
    //         animate(element, { "opacity": 1 }, function () {
    //             currentObj = element
    //         })
    //     })

    // } else {
    //     element.style.display = "block"
    //     animate(element, { "opacity": 1 }, function () {
    //         currentObj = element
    //     })
    // }
    if (currentObj) {
        currentObj.style.display = "none"
    }
    element.style.display = "block"
    currentObj = element
}

for (let i = 0; i < thumbs.length; i++) {
    const t = thumbs[i];
    t.addEventListener("click", function (e) {
        let imgObj = document.createElement("img")
        let src = this.href
        request = src
        for (let j = 0; j < thumbs.length; j++) {
            const th = thumbs[j];
            th.className = "thumb"
        }
        this.className = "thumb active"
        if (cache.hasOwnProperty(src)) {
            if (cache[src].isLoading == false) {
                corssfade(cache[src].imgObj)
            }
        } else {
            cache[src] = {
                imgObj: imgObj,
                isLoading: true
            }
            imgObj.addEventListener("load", function () {
                imgObj.style.display = "none"
                viewer.className = ""
                viewer.appendChild(imgObj)
                cache[src].isLoading = false
                if (request == src) {
                    corssfade(imgObj)
                }
            })
            viewer.className = "is-loading"
            imgObj.src = src
            imgObj.alt = this.title
        }
        e ? e.preventDefault() : window.event.returnValue = true
        if (this.setCapture) {
            this.setCapture()
        }
        return false
    }, true)
}
simulateClick(thumbs[0])

// 滑动块
let slideviewer = document.getElementsByClassName("slide-viewer")[0]
let slides = document.getElementsByClassName("slide")
let btns = document.getElementsByClassName("slide-button")
let currentIndex = 0
let timeout

function move(newIndex) {
    let animateLeft, slideLeft
    advance()
    if (currentIndex == newIndex || (parseInt(slideviewer.style.left) != 0 && slideviewer.style.left != "")) {
        return false
    }
    btns[currentIndex].className = "slide-button"
    btns[newIndex].className = "slide-button active"
    if (newIndex > currentIndex) {
        animateLeft = "-960"
        slideLeft = "960"
    } else {
        animateLeft = "960"
        slideLeft = "-960"
    }
    slides[newIndex].style.left = slideLeft + "px"
    slides[newIndex].style.display = "block"
    animate(slideviewer, { "left": animateLeft }, function () {
        slides[currentIndex].style.display = "none"
        slideviewer.style.left = 0
        slides[newIndex].style.left = 0
        currentIndex = newIndex
    })
}
function advance() {
    clearInterval(timeout)
    timeout = setInterval(function () {
        if (currentIndex < slides.length - 1) {
            move(currentIndex + 1)
        } else {
            move(0)
        }
    }, 4000)
}

for (let i = 0; i < btns.length; i++) {
    const b = btns[i];
    b.index = i
    b.addEventListener("click", function () {
        let flag = move(b.index)
        if (flag == false) {
            return
        }
        for (let j = 0; j < btns.length; j++) {
            const btn = btns[j];
            btn.className = "slide-button"
        }
        this.className = "slide-button active"
    })
}
slides[currentIndex].style.display = "block"
advance()

// 轮播图
let promo = document.getElementsByClassName("promo")[0]
let promobd = document.getElementsByClassName("promo-bd")[0]
let promoopt = document.getElementsByClassName("promo-opt")[0]
let promonav = document.getElementsByClassName("promo-nav")[0]
let promolis = promobd.children
let left = document.getElementsByClassName("opt-l")[0]
let right = document.getElementsByClassName("opt-r")[0]
let index = 0
for (let i = 0; i < promolis.length; i++) {
    let li = "<li><a></a></li>"
    if (i == index) {
        li = '<li class="active"><a></a></li>'
    }
    promonav.innerHTML += li
}
let navlis = promonav.children
function stewidth() {
    promobd.appendChild(promobd.children[0].cloneNode(true))
    promobd.style.width = promolis[0].clientWidth * promobd.children.length + "px";
}
stewidth()
promo.addEventListener("mouseover", function () {
    promoopt.style.display = "block"
    clearInterval(timerId)
}, false)
promo.addEventListener("mouseout", function () {
    promoopt.style.display = "none"
    timerId = setInterval(movehandler, 4000)
}, false)
function movehandler() {
    if (index == promolis.length - 1) {
        index = 0
        promobd.style.left = "0"
    }
    index++
    animate(promobd, { "left": -index * promo.clientWidth })
    if (index == promolis.length - 1) {
        navlis[navlis.length - 1].className = ""
        navlis[0].className = "active"
    } else {
        for (let i = 0; i < navlis.length; i++) {
            const ol = navlis[i];
            navlis[i].className = ""
        }
        navlis[index].className = "active"
    }
}
let timerId = setInterval(movehandler, 4000)
right.addEventListener("click", movehandler, false)
left.addEventListener("click", function () {
    if (index == 0) {
        index = promobd.children.length - 1
        promobd.style.left = -index * promo.clientWidth + "px"
    }
    index--
    animate(promobd, { "left": -index * promo.clientWidth })
    for (let i = 0; i < navlis.length; i++) {
        const ol = navlis[i];
        navlis[i].className = ""
    }
    navlis[index].className = "active"
}, false)
for (let i = 0; i < navlis.length; i++) {
    const olli = navlis[i]
    olli.i = i
    olli.addEventListener("click", function () {
        index = olli.i
        animate(promobd, { "left": -index * promo.clientWidth })
        for (let i = 0; i < navlis.length; i++) {
            const ol = navlis[i];
            navlis[i].className = ""
        }
        this.className = "active"
    }, false)
}